{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'basic_app/tag_left_user.html' %}
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">本系统实例的管理页</h2>
        <div class="table-responsive">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <select class="form-control bg-primary" name="ins_type" id="ins_type">
                        <option value="ALL">ALL</option>
                        <option value="ORACLE">ORACLE</option>
                        <option value="MYSQL">MYSQL</option>
                        <option value="MONGO">MONGODB</option>
                        <option value="POSTGRESQL">POSTGRESQL</option>
                        <option value="REDIS">REDIS</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" name="ins_status" id="ins_status">
                        <option value="VALID">VALID</option>
                        <option value="LOCKED">LOCKED</option>
                        <option value="ALL">ALL</option>
                    </select>
                </div>
                {% include 'basic_app/search.html' %}
                <button type="button" class="btn btn-primary" onclick="add()"><span
                        class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加实例
                </button>
                <button type="button" class="btn btn-primary" onclick="active_check_all()"><span
                        class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 一键探活
                </button>
            </form>
        </div>
        <div class="table-responsive">
            <table id="sqlaudit-list" data-toggle="table" class="table table-striped table-hover table-bordered"
                   style="table-layout: inherit; white-space: nowrap; text-overflow: ellipsis; margin-top: 0px;">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>类型</th>
                    <th>版本</th>
                    <th>数据库用途</th>
                    <th>ip</th>
                    <th>sid</th>
                    <th>service_name</th>
                    <th>port</th>
                    <th>连接串</th>
                    <th>状态</th>
                    <th>探活</th>
                    <th>探活时间</th>
                    <th>创建时间</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tabbody">
                {% for i in current_page %}
                    <tr>
                        {#                        <td style="display:none">{{ i.id }}</td>#}
                        <td>{{ i.id }}</td>
                        <td>{{ i.db_type }}</td>
                        {#                        <td>{{ i.db_version }}</td>#}
{#                        <td><span data-toggle="tooltip" data-placement="bottom"#}
{#                                  title="{{ i.ins_get_version_msg }}">{{ i.db_version }}</span></td>#}
                        <td>
                            {% if i.ins_get_version_msg %}
                                <span data-toggle="tooltip" data-placement="bottom"
                                      title="{{ i.ins_get_version_msg }}">{{ i.db_version }}</span>
                            {% else %}
                                {{ i.db_version }}
                            {% endif %}
                        </td>

                        <td>{{ i.dbname }}</td>
                        <td>{{ i.ip }}</td>
                        <td>{{ i.sid }}</td>
                        <td>{{ i.service_name }}</td>
                        <td>{{ i.port }}</td>
                        <td>{{ i.conn_string }}</td>
                        <td>{{ i.status }}</td>
                        <td><span data-toggle="tooltip" data-placement="bottom"
                                  title="{{ i.ins_active_msg }}">{{ i.ins_active }}</span></td>
                        <td>{{ i.ins_active_time }}</td>
                        <td>{{ i.crtime | date:'Y-m-d H:i:s' }}</td>
                        <td>{{ i.remark }}</td>
                        <td><a style="cursor:pointer" onclick="edit({{ i.id }})">编辑</a> |
                            <a style="cursor:pointer" onclick="active_check_one({{ i.id }})">探活</a> |
                            <div class="btn-group">
                                <button type="button" class="btn btn-link  dropdown-toggle btn-sm"
                                        data-toggle="dropdown">
                                    更多
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    {#                                        <li><a href="/basic_app/instance_lock?nid={{ i.id }}"><span style="color: royalblue">锁定</span></a></li>#}
                                    <li><a onclick="ins_lock({{ i.id }})"><span style="color: royalblue">锁定</span></a>
                                    </li>

                                    <li type=""><a href="/basic_app/instance_delete?nid={{ i.id }}"
                                                   onclick="if(confirm('确认删除吗？')==false)return false;"><span
                                            style="color: royalblue">删除</span></a></li>
                                    <li><a href="/basic_app/instance_more?nid={{ i.id }}"><span
                                            style="color: royalblue">详情</span></a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {#        以下是分页#}
        {% include 'basic_app/paginator_ins.html' %}
        {#        以上是分页#}
    </div>
    </div>

    <!-- 模态框（Modal） 添加 / 编辑-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="docModalContent" style="width: 700px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加、编辑实例信息
                        <small style="font-size: 70%; color: #5a6268;">（提交时自动实例探活）</small>
                    </h4>
                </div>

                <!-- Tab 标签 -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#oracle_tab" role="tab" data-toggle="tab">Oracle</a></li>
                    <li><a href="#mysql_tab" role="tab" data-toggle="tab">MySQL</a></li>
                </ul>

                <!-- Tab 内容 -->
                <div class="tab-content" style="padding: 15px;">

                    <!-- Oracle 表单 -->
                    <div class="tab-pane active" id="oracle_tab">
                        <form class="form-horizontal" id="oracleForm">
                            <input type="hidden" name="add_type" value="ORACLE">

                            <div class="form-group" style="display: none">
                                <label class="col-sm-2 control-label">id：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_id"
                                           placeholder="id">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">db_info：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_dbname"
                                           placeholder="生产库_liwk_127.0.0.1">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">ip：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_ip"
                                           placeholder="127.0.0.1">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">port：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_port"
                                           placeholder="1521">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">sid：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_sid"
                                           placeholder="liwk">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">service_name：</label>
                                <div class="col-sm-10">
                                    <div style="display: flex; align-items: center;">
                                        <input type="text" style="width:300px;" class="form-control"
                                               name="add_service_name"
                                               placeholder="liwk">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">conn_string：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_conn_string"
                                           placeholder="127.0.0.1:1521/liwk">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">user/pwd：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_user_pwd"
                                           placeholder="liwk/liwk">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">sysdba：</label>
                                <div class="col-sm-10" style="width:300px;">
                                    <select class="form-control" name="add_sysdba_role">
                                        <option>否</option>
                                        <option>是</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">remark：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_remark"
                                           placeholder="备注">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">status：</label>
                                <div class="col-sm-10" style="width:300px;">
                                    <select class="form-control" name="add_status">
                                        <option>VALID</option>
                                        <option>LOCKED</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- MySQL 表单 -->
                    <div class="tab-pane" id="mysql_tab">
                        <form class="form-horizontal" id="mysqlForm">
                            <input type="hidden" name="add_type" value="MYSQL">

                            <!-- 以下与 Oracle 表单一致，仅名称一致就可 -->

                            <div class="form-group" style="display: none">
                                <label class="col-sm-2 control-label">id：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_id"
                                           placeholder="id">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">db_info：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_dbname"
                                           placeholder="生产库_liwk_127.0.0.1">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">ip：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_ip"
                                           placeholder="127.0.0.1">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">port：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_port"
                                           placeholder="3306">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">sid：</label>
                                <div class="col-sm-10">
                                    <div style="display: flex; align-items: center;">
                                        <input type="text" style="width:300px;" class="form-control" name="add_sid"
                                               placeholder="-" disabled>
                                        <span style="margin-left: 10px; white-space: nowrap; color: #888; font-size: 12px;">仅 Oracle 使用</span>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-2 control-label">service_name：</label>
                                <div class="col-sm-10">
                                    <div style="display: flex; align-items: center;">
                                        <input type="text" style="width:300px;" class="form-control"
                                               name="add_service_name"
                                               placeholder="-" disabled>
                                        <span style="margin-left: 10px; white-space: nowrap; color: #888; font-size: 12px;">仅 Oracle 使用</span>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-2 control-label">conn_string：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_conn_string"
                                           placeholder="127.0.0.1:3306">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">user/pwd：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_user_pwd"
                                           placeholder="root/123456">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">sysdba：</label>
                                <div class="col-sm-10">
                                    <div style="display: flex; align-items: center;">
                                        <select class="form-control" name="add_sysdba_role" disabled
                                                style="width: 300px;">
                                            <option>-</option>
                                            <option>否</option>
                                            <option>是</option>
                                        </select>
                                        <span style="margin-left: 10px; white-space: nowrap; color: #888; font-size: 12px;">仅 Oracle 使用</span>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-2 control-label">remark：</label>
                                <div class="col-sm-10">
                                    <input type="text" style="width:300px;" class="form-control" name="add_remark"
                                           placeholder="备注">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">status：</label>
                                <div class="col-sm-10" style="width:300px;">
                                    <select class="form-control" name="add_status">
                                        <option>VALID</option>
                                        <option>LOCKED</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="button_submit()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 一键探活 模态框（仅包含两个下拉框） -->
    <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="filterModalContent" style="width: 700px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="filterModalLabel">
                        筛选实例信息
                    </h4>
                </div>

                <div class="modal-body" style="padding: 15px;">
                    <form class="form-horizontal" id="filterForm">
                        <div class="form-group row" style="margin-bottom: 30px;">
                            <div class="col-xs-6"
                                 style="display: flex; align-items: center; padding-top: 15px; padding-bottom: 15px;">
                                <label for="db_type" style="width: 60px; margin-bottom: 0;">类型：</label>
                                <select class="form-control bg-primary" id="dbcheck_all_db_type" style="flex: 1;">
                                    <option value="ALL">ALL</option>
                                    <option value="ORACLE">ORACLE</option>
                                    <option value="MYSQL">MYSQL</option>
                                    <option value="MONGO">MONGODB</option>
                                    <option value="POSTGRESQL">POSTGRESQL</option>
                                    <option value="REDIS">REDIS</option>
                                </select>
                            </div>
                            <div class="col-xs-6"
                                 style="display: flex; align-items: center; padding-top: 15px; padding-bottom: 15px; padding-right: 15px;">

                                <label for="db_status" style="width: 60px; margin-bottom: 0;">状态：</label>
                                <select class="form-control" id="dbcheck_all_db_status" style="flex: 1;">
                                    <option value="VALID">VALID</option>
                                    <option value="LOCKED">LOCKED</option>
                                    <option value="ALL">ALL</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="alldb_check_submit()">一键探活</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        // 数据库类型，数据库状态变更公用方法
        function db_type_status_change() {
            ins_type = $('#ins_type').val();
            ins_status = $('#ins_status').val();
            user_search = $('#user_search').val();
            line_cont = $('#line_set').val();
            //page = $('#page_set').val();
            page = 1;
            path = '/basic_app/instance?ins_type=' + ins_type + '&ins_status=' + ins_status + '&page=' + page + '&line_count=' + line_cont + '&user_search=' + user_search
            window.location.href = path
        }

        $('#ins_status').change(function () {
            db_type_status_change();
        })
        $('#ins_type').change(function () {
            db_type_status_change();
        })

        function button_submit() {
            // 当前 tab 页面选择的是哪一个
            const activeTab = $('.nav-tabs li.active a').attr('href'); // #oracle_tab 或 #mysql_tab
            const formId = (activeTab === '#oracle_tab') ? '#oracleForm' : '#mysqlForm';

            // 获取表单字段（根据 formId 限定范围）
            const $form = $(formId);
            const dbname = $form.find("input[name='add_dbname']").val();
            const ip = $form.find("input[name='add_ip']").val();
            const port = $form.find("input[name='add_port']").val();

            // 正则校验
            const ip_regex = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            const port_regex = /^[0-9]{1,5}$/;

            if (!dbname) {
                alert("请输入数据库名");
                return false;
            }
            if (!ip) {
                alert("请输入ip地址");
                return false;
            }
            if (!port) {
                alert("请输入port号");
                return false;
            }
            if (!ip_regex.test(ip)) {
                alert("请输入正确的ip地址");
                return false;
            }
            if (!port_regex.test(port)) {
                alert("请输入正确的端口号");
                return false;
            }

            // 提交数据
            $.ajax({
                type: "POST",
                url: "/basic_app/instance_add_edit",
                data: {
                    'add_id': $form.find("input[name='add_id']").val(),
                    'add_dbname': dbname,
                    'add_ip': ip,
                    'add_port': port,
                    'add_sid': $form.find("input[name='add_sid']").val(),
                    'add_conn_string': $form.find("input[name='add_conn_string']").val(),
                    'add_user_pwd': $form.find("input[name='add_user_pwd']").val(),
                    'add_sysdba_role': $form.find("select[name='add_sysdba_role']").val(),
                    'add_remark': $form.find("input[name='add_remark']").val(),
                    'add_status': $form.find("select[name='add_status']").val(),
                    'add_type': $form.find("input[name='add_type']").val(), // hidden input
                    'add_service_name': $form.find("input[name='add_service_name']").val(),

                    // 附加参数（不在 modal 中，但你原代码里有）
                    'line_count_set': $('.line_count').val(),
                    'page_set': $('#page_set').val(),
                    'search': $('.aa_search').val()
                },
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    showLoading();
                    $('#instance_submit').button('loading');
                },
                complete: function () {
                    hideLoading();
                    $('#instance_submit').button('reset');
                },
                success: function (result) {
                    if (result.substr(0, 8) == "AJAX_ERR") {
                        alert(result);
                    } else {
                        window.location.href = result;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        }

        //当添加表单时
        function add() {
            // 清空两个表单
            $('#oracleForm')[0].reset();
            $('#mysqlForm')[0].reset();

            // 恢复 Tab 切换功能
            $('.nav-tabs a').off('show.bs.tab');

            // 默认切到 Oracle（也可以切到 MySQL，看你业务需要）
            $('#myModal a[href="#oracle_tab"]').tab('show');

            // 打开模态框
            $('#myModal').modal('show');
        }

        //当编辑表单时回传数据
        function edit(id) {
            var url = "/basic_app/instance_add_edit?nid=" + id;

            // 清空表单
            $('#oracleForm')[0].reset();
            $('#mysqlForm')[0].reset();

            $.ajax({
                url: url,
                type: "get",
                dataType: "json",
                success: function (res) {
                    // 先移除上一次绑定的事件，防止重复绑定
                    $('.nav-tabs a').off('show.bs.tab');

                    if (res.db_type === 'ORACLE') {
                        $('#myModal a[href="#oracle_tab"]').tab('show');

                        // 禁止切到 MySQL
                        $('.nav-tabs a[href="#mysql_tab"]').on('show.bs.tab', function (e) {
                            return false; // 阻止切换
                        });

                        // 回填 Oracle
                        var form = $('#oracleForm');
                        form.find("input[name='add_id']").val(res.id);
                        form.find("input[name='add_dbname']").val(res.dbname);
                        form.find("input[name='add_ip']").val(res.ip);
                        form.find("input[name='add_port']").val(res.port);
                        form.find("input[name='add_sid']").val(res.sid);
                        form.find("input[name='add_conn_string']").val(res.conn_string);
                        form.find("input[name='add_user_pwd']").val(res.u_info);
                        form.find("select[name='add_sysdba_role']").val(res.dba_role);
                        form.find("input[name='add_remark']").val(res.remark);
                        form.find("select[name='add_status']").val(res.status);
                        form.find("input[name='add_service_name']").val(res.service_name);

                    } else if (res.db_type === 'MYSQL') {
                        $('#myModal a[href="#mysql_tab"]').tab('show');

                        // 禁止切到 Oracle
                        $('.nav-tabs a[href="#oracle_tab"]').on('show.bs.tab', function (e) {
                            return false;
                        });

                        // 回填 MySQL
                        var form = $('#mysqlForm');
                        form.find("input[name='add_id']").val(res.id);
                        form.find("input[name='add_dbname']").val(res.dbname);
                        form.find("input[name='add_ip']").val(res.ip);
                        form.find("input[name='add_port']").val(res.port);
                        form.find("input[name='add_sid']").val(res.sid);
                        form.find("input[name='add_service_name']").val(res.service_name);
                        form.find("input[name='add_conn_string']").val(res.conn_string);
                        form.find("input[name='add_user_pwd']").val(res.u_info);
                        form.find("select[name='add_sysdba_role']").val(res.dba_role);
                        form.find("input[name='add_remark']").val(res.remark);
                        form.find("select[name='add_status']").val(res.status);
                    }

                    // 显示模态框
                    $('#myModal').modal('show');
                }
            });
        }

        // 模态框关闭时恢复 Tab 切换
        $('#myModal').on('hidden.bs.modal', function () {
            $('.nav-tabs a').off('show.bs.tab');
        });

        //回写数据
        $(document).ready(function () {
            $('#tabbody tr').each(function (i) {
                $(this).children('td').each(function (j) {
                    if (j == 10) {
                        {#console.log($(this).text())#}
                        if ($(this).text() == 'FAILED') {
                            $(this).css('color', 'red')
                        }
                        if ($(this).text() == 'SUCCESS') {
                            $(this).css('color', 'green')
                        }
                    }
                    if (j == 9) {
                        //console.log($(this).text())
                        if ($(this).text() == 'LOCKED') {
                            $(this).css('color', 'red')
                        }
                        if ($(this).text() == 'VALID') {
                            $(this).css('color', 'green')
                        }
                    }
                });
            })
        })

        function active_check_one(id) {
            $.ajax({
                type: "GET",
                data: {
                    'nid': id,
                    'line_count_set': $('.line_count').val(),
                    'page_set': $('#page_set').val(),
                    'search': $('.aa_search').val()
                },
                url: "/basic_app/instance_ins_check", //后台处理函数的url
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                    showLoading()
                    $('#instance_submit').button('loading')
                },
                complete: function () {
                    //$('#loadingModal').modal('hide');
                    hideLoading()
                    $('#instance_submit').button('reset')
                },
                success: function (result) {
                    res = JSON.parse(result);
                    if (res['ins_check_type'] == 'all') {

                        var iconType = "success";
                        var title = "巡检完成";
                        var result = result.message;
                        let iscancelButton = false;
                        // 调用公共方法弹窗
                        showAlert(title, result, iconType, iscancelButton);
                        alert('本次探活结果:' + '\n' +
                            'total:' + res['total_c'] + ' 个' + '\n' +
                            'success:' + res['success_c'] + ' 个' + '\n' +
                            'failed:' + res['failed_c'] + ' 个'
                        )
                        window.location.href = res['url']
                    } else {
                        window.location.href = res['url']
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            })
        }

        //一键探活 弹窗
        function active_check_all(id) {
            $('#filterModal').modal('show');

        }

        //一键探活 request(get)
        function alldb_check_submit() {
    $.ajax({
        type: "GET",
        data: {
            'db_type': $('#dbcheck_all_db_type').val(),
            'db_status': $('#dbcheck_all_db_status').val()
        },
        url: "/basic_app/instance_ins_check", // 后台处理函数的url
        cache: false,
        dataType: "html",
        beforeSend: function () {
            showLoading();
            $('#instance_submit').button('loading');
        },
        complete: function () {
            hideLoading();
            $('#instance_submit').button('reset');
        },
        success: function (result) {
            let res = JSON.parse(result);
            console.log(res);
            console.log(res['all'].total);

            let title = "探活完成";
            let iconType = "success";
            let iscancelButton = false;

            // 构造HTML表格
            let table = `
            <table border="1" cellspacing="0" cellpadding="5" style="border-collapse: collapse; font-family: monospace; width: 100%;">
                <thead>
                    <tr>
                        <th>类型</th><th>total</th><th>success</th><th>failed</th>
                    </tr>
                </thead>
                <tbody>`;

            // 先输出 all
            if (res.all) {
                let item = res.all;
                table += `<tr>
                    <td>ALL</td>
                    <td style="text-align:right;">${item.total}</td>
                    <td style="text-align:right;">${item.success}</td>
                    <td style="text-align:right;">${item.failed}</td>
                </tr>`;
            }

            // 再输出其他
            for (let dbType of Object.keys(res).filter(k => k !== 'all').sort()) {
                let item = res[dbType];
                table += `<tr>
                    <td>${dbType.toUpperCase()}</td>
                    <td style="text-align:right;">${item.total}</td>
                    <td style="text-align:right;">${item.success}</td>
                    <td style="text-align:right;">${item.failed}</td>
                </tr>`;
            }

            table += `</tbody></table>`;

            showAlert_html(title, table, iconType, iscancelButton, function () {
                location.reload();
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.responseText);
        }
    });
}



        //锁定实例
        function ins_lock(id) {
            $.ajax({
                type: "POST",
                data: {
                    'nid': id
                },
                url: "/basic_app/instance_lock", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    if (result == 'SUCCESS') {
                        location.reload()
                    } else {
                        alert(result)
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            })
        }

    </script>
    <script>
        $(document).ready(function () {
            const params = new URLSearchParams(window.location.search);
            const ins_type = params.get('ins_type');
            const ins_status = params.get('ins_status');
            const line_set = params.get('line_count');
            const page_set = params.get('page');
            if (ins_type) {
                $('#ins_type').val(ins_type);
            }
            if (ins_status) {
                $('#ins_status').val(ins_status);
            }
            if (line_set) {
                $('#line_set').val(line_set);
            }
            if (page_set) {
                $('#page_set').val(page_set);
            }
        });
    </script>
{% endblock %}